<template>
    <div class="full-width full-height flex column align-center justify-center">
        <el-row class="q-mb-md full-width">
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">昨日出库订单数</div>
                    <div class="text-count">{{ base_info.out_order_quantity }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">昨日出库件</div>
                    <div class="text-count">{{ base_info.out_inventory_quantity }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">本月出库订单数</div>
                    <div class="text-count">{{ base_info.out_order_quantity_month }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">本月出库件数</div>
                    <div class="text-count">{{ base_info.out_inventory_quantity_month }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex column align-center justify-center">
                    <div class="text-title">缺货未发</div>
                    <div class="text-count">{{ base_info.long_not_send_date }}</div>
                </div>
            </el-col>
        </el-row>
        <el-row class="q-mb-md full-width">
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">昨日入库件数</div>
                    <div class="text-count">{{ base_info.in_inventory_quantity }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">本月入库件数</div>
                    <div class="text-count">{{ base_info.in_inventory_quantity_month }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">昨日采购单数</div>
                    <div class="text-count">{{ base_info.last_buy_quantity }}</div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="flex column align-center justify-center">
                    <div class="text-title">昨日到货单数</div>
                    <div class="text-count">{{ base_info.last_arrive_quantity }}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="flex column align-center justify-center">
                    <div class="text-title">有货未发</div>
                    <div class="text-count">{{ base_info.long_have_send_date }}</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'DataScreen',

    props: {
        params: {
            type: Object,
            default: () => {},
        },
    },

    data() {
        return {
            base_info: {
                out_order_quantity: undefined,
                out_inventory_quantity: undefined,
                out_order_quantity_month: undefined,
                out_inventory_quantity_month: undefined,
                in_inventory_quantity: undefined,
                in_inventory_quantity_month: undefined,
                last_buy_quantity: undefined,
                last_arrive_quantity: undefined,
                long_not_send_date: undefined,
                long_have_send_date: undefined,
            },
        }
    },
    watch: {
        params: {
            handler(val) {
                this.base_info = val
            },
            deep: true,
            immediate: true,
        },
    },
    created() {},
    mounted() {},
    methods: {},
}
</script>

<style scoped>
.count-title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 6%;
}
.count-sub-title {
    padding-top: 16px;
    text-align: center;
}

.text-title {
    font-size: 14px;
    color: rgb(141, 126, 246);
}
.text-count {
    margin-top: 8px;
    font-size: 24px;
    font-weight: bold;
}
</style>
